uniapp实现自定义tabbar【直用版】 |
您所在的位置：网站首页 › uniapp 修改tabbar样式 › uniapp实现自定义tabbar【直用版】 |
uniapp实现自定义tabbar【直用版】
|
1.pages.json中将tabBar下面全部注释掉
2.在common文件夹下面建一个tabbar文件夹，里面放个tabbar.vue（位置，名称自己随意） tabbar.vue:(直接复制) {item.text}} --> export default { props:{ cureentPage:{ type:String, default:'index' } }, } const to_release=()=>{ //跳转发布页面 uni.navigateTo({ url:"/pages/release/release" }) } const tabbarList=[ //自己定义的tabber { "pagePath": "index", "iconPath": "http://hwww.fun:6060/tabbar/zhu_pi.png", "selectedIconPath": "http://hwww.fun:6060/tabbar/zhu1_pi.png", "text": "主页" }, { "pagePath": "release", "iconPath": "http://hwww.fun:6060/tabbar/add.png", // "selectedIconPath": "/static/img/tabbar/new2/sort1_pi.png", // "text": "发布" }, { "pagePath": "myinfo", "iconPath": "http://hwww.fun:6060/tabbar/user_pi.png", "selectedIconPath": "http://hwww.fun:6060/tabbar/user1_pi.png", "text": "你的" } ] const navigatorTo=(e)=>{ //当点击下方tabbar跳转指定页面 console.log(e); uni.redirectTo({ url:`../../pages/${e}/${e}` }) } .tabbar{ /* border-top:1rpx solid #c5c4c5; */ background-color:#FFFF ; z-index: 999; position: fixed; left: 0; bottom: 0; width: 100%; height: 120rpx; display: flex; justify-content: space-around; align-items: center; } .tab{ display: flex; flex-direction: column; justify-content: center; align-items: center; } image{ width: 50rpx; height: 50rpx; } .addIco{ width: 50px; height: 50px; }3.在需要用到tabbar的位置（index，myinfo）中引入 index.vue: import Tabbar from '@/common/tabbar/tabbar.vue'下面代码直接放当前页面底部就行，注意传递了一个’index‘的值，这个值与tabbar中的pagePath是对应的，以此来判断该跳转哪个页面 myinfo.vue import Tabbar from '@/common/tabbar/tabbar.vue'现在可以用了 |
【本文地址】